<template>
  <div v-show="hasPerms(perms)">
     <el-table :data="tableData" 
        :header-cell-style="tableHeaderColor"
        ref="multipleTable"
        style="width: 100%" 
        :row-class-name="tableRowClassName"
        border
        size="small">
        <el-table-column prop="enclosureName" label="附件名称" width="180" align="center"></el-table-column>
        <el-table-column prop="enclosureType" label="附件类型" width="180" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.enclosureType == '1'">普通附件</span>
                <span v-else>资质证书</span>
            </template>
        </el-table-column>
        <el-table-column prop="上载人" label="上载人" align="center"></el-table-column>
        <el-table-column prop="createTime" label="上载时间" align="center"></el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
            <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
                v-if="isView != 1"
                >删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog
      title="选择附件"
      width="80%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
     <el-form
        :model="dataForm"
        label-width="100px"
        ref="dataForm"
        :size="size"
        label-position="right"
      >
        <el-row style="display:flex;">
            <el-form-item label="附件类型：" prop="enclosureType">
                <el-select
                    v-model="dataForm.enclosureType"
                    placeholder="请选择报价方式"
                    style="width:400px;"
                    auto-complete="off"
                >
                    <el-option label="普通附件" value="1"></el-option>
                    <el-option label="资质证书" value="2"></el-option>
              </el-select>
            </el-form-item>
        </el-row>
        <el-row style="display:flex;">
            <el-form-item label="选择文件：" prop="enclosureUrl">
                <el-input class="hideBorder" v-model.trim="fileName" auto-complete="off" clearable disabled></el-input>
                <el-upload
                style="width:400px;"
                class="avatar-uploader"
                ref="upload"
                :action="imgUpload"
                :show-file-list="false"
                :on-success="handleAvatarSuccessCardTwo"
                :before-upload="beforeAvatarUploadCardTwo"
              >
                <!-- <img
                  v-if="dataForm.enclosureUrl"
                  :src="dataForm.enclosureUrl"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                 <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button type="primary" @click="checkpaged">保存</el-button>
        <el-button type="primary" @click="enclosureAdd">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { hasPermission } from '@/permission/index.js'

export default {
  name: 'annexComponent',
  props: {
    perms: {  // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    },
    show: {  // 按钮是否展示
      type: Boolean,
      default: true
    },
    editDialogVisible:{
        type: Boolean,
        default: false
    },
    supplierId:{
        type:String,
        default: null
    },
    isView:{
        type:String,
        default: null
    }
  },
  data() {
    return {
        value: [],
        size:"small",
        tableData: [],
        imgUpload: this.utils.imgUploadUrl,
        dataForm:{
            enclosureName:null,
            enclosureUrl:null,
            enclosureType:'1',
        },
        fileName:null,
    }
  },
  methods: {
    hasPerms: function (perms) {  
      if(this.show == false){
        return this.show
      } 
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms)
    },
    //table的双色条纹
    tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
            return 'warning-row';
        } else if (rowIndex === 3) {
            return 'success-row';
        }
        return '';
    },
    handleDelete(index, row) {
        let that = this;
        that.$confirm("确认要删除该联系人吗?", "提示", {
          type: "warning"
        }).then(() => {
            that.utils.request.deleteSupplierEnclosur({id:row.id},res =>{
                if(res.code == '0000'){
                    that.$message({message: '删除成功', type: 'success'});
                    that.querySupplierEnclosurList();
                }
            });
        })
    },
    //修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
            return 'background-color:rgb(250,250,250);'
        }
    },
    enclosureAdd(){
        this.$emit("enclosureAdd",false);
    },
    handleAvatarSuccessCardTwo(res, file) {
        this.dataForm.enclosureUrl = file.response.data.imgUrl;
        if(file.name && file.name.indexOf('.') != -1){
            this.dataForm.enclosureName =  file.name.split('.')[0];
        }
        let param = this.dataForm;
        param.supplierId = this.supplierId;
        this.utils.request.saveOrUpdateSupplierEnclosur(param,res =>{
            if(res.code == '0000'){
                this.$emit("enclosureAdd",false);
                this.dataForm = {
                    enclosureName:null,
                    enclosureUrl:null,
                    enclosureType:'1',
                };
                this.querySupplierEnclosurList();
                this.$message({message: '操作成功', type: 'success'});
            }
        });
        
    },
    beforeAvatarUploadCardTwo(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      this.fileName = file.name;
      return isLt2M;
    },
    checkpaged(){
        if(!this.fileName || this.fileName == null || this.fileName == ''){
            this.$message({message: '请选择要上传的附件', type: 'warning'});
            return;
        }
        this.$refs.upload.submit();
        
    },
    //查询供应商附件列表
    querySupplierEnclosurList(){
        this.utils.request.supplierEnclosurList({supplierId:this.supplierId},res =>{
            if(res.code == '0000' && res.data){
                this.tableData = res.data;
            }
        });
    },
  },
  mounted() {
      if(this.supplierId){
          this.querySupplierEnclosurList();
      }
  }
}
</script>

<style scoped>
</style>